<template>
  <div class="mixin-components-container">
    <div class="box-card" style="text-align: left">
      <div class="titleBox">
        <p></p>
      </div>
      <div id="waveform" ref="waveform"></div>
      <!-- 控制按钮 -->
      <div class="player_controls controls">
        <button
          @click="playPre(filePath)"
          class="btn controls__btn controls__btn--prev"
        ></button>
        <!-- 暂停 -->
        <button
          @click="playMusic"
          class="btn controls__btn controls__btn--play-pause"
        >
          <i v-if="playing" class="fa fa-fw fa-pause"></i>
          <i v-else class="fa fa-fw fa-play"></i>
        </button>
        <!-- 下一首 -->
        <button
          @click="playNext(filePath)"
          class="btn controls__btn controls__btn--next"
        >
          <i class="fa fa-forward"></i>
        </button>
        <!-- 控制音量 -->
        <button class="btn controls__btn controls__btn--volume">
          <div class="volum-control">
            <i class="fa fa-volume-up" aria-hidden="true"></i>
            <input
              v-model="vol"
              :style="`background-image:linear-gradient( to right, ${fillColor}, ${fillColor} ${percent}, ${emptyColor} ${percent})`"
              class="volume"
              type="range"
              min="0"
              max="100"
              id="fader"
              @input="changeVol"
            />
          </div>
          <!-- <output for=fader id=volume>50</output> -->
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import WaveSurfer from "wavesurfer.js";
import path from "path";
import fs from "fs-extra";
import { ipcRenderer } from "electron";
import { Readable } from "stream";
export default {
  data() {
    return {
      wavesurfer: null,
      filePath: "",
      playing: false,
      songName: "",
      fillColor: "rgba(48, 113, 169, 0.8)",
      emptyColor: "rgba(48, 113, 169, 0.4)",
      percent: "30%",
      vol: 30,
    };
  },
  mounted() {
    this.$nextTick(() => {
      let waveform = this.$refs.waveform;
      this.wavesurfer = WaveSurfer.create({
        container: waveform,
        barWidth: 2,
        barHeight: 1,
        barGap: 1,
        barRadius: 2,
        waveColor: "#006d75",
        progressColor: "#597ef7",
        backend: "MediaElement",
        mediaControls: false,
        audioRate: "1",
      });
      // 首次加载
      // let originPath = remote.process.argv[1];
      // let originPath = '/Users/kerin/Downloads/艾辰 - 错位时空.mp3';
      // this.loadMusic(originPath);
      // 播放其他歌曲，监听主进程senond-instance传过来的第二首歌曲的本地路径
      ipcRenderer.send("getPath");
      ipcRenderer.on("path", (event, arg) => {
        console.log({ path });
        const newOriginPath = arg;
        // console.log(newOriginPath);
        this.loadMusic(newOriginPath);
      });
    });
  },
  methods: {
    loadMusic(diskPath) {
      this.filePath = diskPath;
      this.songName = path.basename(diskPath);
      let buffer = fs.readFileSync(diskPath); // 读取文件 并将进行缓存区转换
      let stream = this.bufferToStream(buffer); // 将buff数据转为stream
      let fileUrl; // 转为blob
      this.streamToBlob(stream)
        .then((res) => {
          fileUrl = res;
          // console.log(fileUrl);

          //将blob对象转成blob链接
          let filePath = window.URL.createObjectURL(fileUrl);
          // console.log(filePath);
          this.wavesurfer.load(filePath);

          // 自动播放
          this.wavesurfer.play();
          this.playing = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    bufferToStream(binary) {
      const readableInstanceStream = new Readable({
        read() {
          this.push(binary);
          this.push(null);
        },
      });
      return readableInstanceStream;
    },
    streamToBlob(stream, mimeType) {
      if (mimeType != null && typeof mimeType !== "string") {
        throw new Error("Invalid mimetype, expected string.");
      }
      return new Promise((resolve, reject) => {
        const chunks = [];
        stream
          .on("data", (chunk) => chunks.push(chunk))
          .once("end", () => {
            const blob =
              mimeType != null
                ? new Blob(chunks, { type: mimeType })
                : new Blob(chunks);
            resolve(blob);
          })
          .once("error", reject);
      });
    },
    playMusic() {},
    playPre() {},
    playNext() {},
    changeVol() {},
  },
};
</script>

<style lang="scss" scoped>
.mixin-components-container {
  // padding-top: 60px;
  .title-box {
    width: 200px;
    margin: 0 auto;
    overflow: hidden;
    .songName {
      text-align: center;
      padding-left: 20px;
      font-size: 16px;
      color: #fff;
      display: inline-block;
      white-space: nowrap;
      animation: 10s wordsLoop linear infinite normal;
    }
    @keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
    @-webkit-keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
  }
  #waveform {
    -webkit-app-region: no-drag;
    margin: 0 20px;
  }
  .player__controls {
    width: 50%;
    margin: 0 auto;
    display: flex;
    margin-top: 30px;
    // background: #1e1e21;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .btn {
      width: 100px;
      height: 100px;
      padding: 30px;
      color: #fff;
      font-size: 25px;
      background-color: transparent;
      outline: none;
      border: none;
      &:hover {
        //cursor: url(../assets/pointer.png), pointer;
        background: #2a2931;
      }
    }
    .volum-control {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      &:hover {
        .volume {
          display: block;
        }
      }
    }
    .volume {
      display: none;
      -webkit-app-region: no-drag;
      width: 100px;
      height: 8px;
      margin-left: 5px;
      appearance: none;
      outline: none;
      border-radius: 8px;
      &::-webkit-slider-thumb {
        appearance: none;
        width: 8px;
        background-color: #3071a9cc;
        border: 8px solid #3071a9cc;
        border-radius: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>